/**
 * 数字输入字段组件
 * 封装Ant Design的Form.Item和InputNumber组件，提供带验证的数字输入功能
 * 支持范围限制、步长控制、必填验证和自定义样式
 * 
 * 该组件是表单中数字输入的标准实现，具有以下特性：
 * 1. 自动数字类型验证
 * 2. 可配置的数值范围限制
 * 3. 可配置的步长控制
 * 4. 必填验证支持
 * 5. 主题适配样式
 * 6. 测试标识支持
 */
import React, { useMemo } from 'react';
import { Form, InputNumber } from 'antd';
import type { CSSProperties } from 'react';
import type { Rule } from 'antd/es/form';

/**
 * 数字字段属性接口
 * 定义了数字输入字段组件所需的所有属性
 */
interface NumberFieldProps {
  /** 字段名称，对应Form.Item的name属性 */
  name: string | (string | number)[];
  /** 字段标签 */
  label: React.ReactNode;
  /** 最小值限制，默认为-100000000 */
  min?: number;
  /** 最大值限制，默认为100000000 */
  max?: number;
  /** 步长，默认为1 */
  step?: number;
  /** 错误提示信息，默认为'请输入有效的数字' */
  message?: string;
  /** 是否禁用输入框 */
  disabled?: boolean;
  /** 默认值 */
  defaultValue?: number;
  /** 自定义样式 */
  style?: CSSProperties;
  /** 提示信息 */
  tooltip?: string;
  /** 是否必填，默认为true */
  required?: boolean;
}

/**
 * 数字输入字段组件实现
 * 
 * 基于Ant Design的InputNumber组件封装，提供统一的数字输入体验
 * 支持范围验证、步长控制、主题适配等功能
 * 
 * @param props 组件属性
 * @param props.name 字段名称，用于表单数据绑定
 * @param props.label 字段标签，显示在输入框上方
 * @param props.min 最小值限制（默认-100000000）
 * @param props.max 最大值限制（默认100000000）
 * @param props.step 步长（默认0.1）
 * @param props.message 验证失败时的提示信息
 * @param props.disabled 是否禁用输入框
 * @param props.defaultValue 默认值
 * @param props.style 自定义样式
 * @param props.tooltip 提示信息，显示在标签旁边
 * @param props.required 是否必填（默认true）
 * @returns React组件
 */
const NumberField: React.FC<NumberFieldProps> = ({
  name,
  label,
  min = -100000000,
  max = 100000000,
  step = 0.1,
  message = '请输入有效的数字',
  disabled = false,
  defaultValue,
  tooltip,
  required = true,
}) => {

  // 简化验证规则，InputNumber组件已经能处理数字类型和范围验证
  const rules = useMemo((): Rule[] => {
    return required ? [
      {
        required: true,
        message: message,
      }
    ] : [];
  }, [required, message]);

  return (
    <Form.Item
      name={name}
      label={label}
      tooltip={tooltip}
      rules={rules}
      className="app-number-field"
    >
      <InputNumber
        min={min}
        max={max}
        step={step}
        className="number-field-input"
        placeholder={required 
          ? `请输入数字`
          : `请输入数字（选填）`
        }
        disabled={disabled}
        defaultValue={defaultValue}
        data-testid={`number-field-${name}`}
        style={{ width: '100%' }} // 自适应宽度，占满父容器
      />
    </Form.Item>
  );
};

export default NumberField;